<!--
 * @Author: your name
 * @Date: 2021-12-15 10:15:03
 * @LastEditTime: 2022-08-04 18:24:13
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \starlight_cat\src\views\artist\add_artist\SlectAnchor.vue
-->
<template>
  <div>
    <InBody>
      <div :class="`my-dialog ${dialogClass}`">
        <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          :close-on-click-modal="modalClose"
          :modal="true"
          :class="size"
          :destroy-on-close="destroy"
        >
          <slot slot="title" class="title" name="title">
            <div class="title">
              {{ title }}
            </div>
          </slot>
          <Scrollbar>
            <div class="dialog_body">
              <slot></slot>
            </div>
          </Scrollbar>
          <div v-if="footer" class="dialog_footer">
            <slot name="footer" style></slot>
          </div>
        </el-dialog>
      </div>
      <!-- 遮罩层 -->
      <!-- <div
        class="my-modal"
        v-show="dialogVisible"
        @click="modalClose ? () => (dialogVisible = false) : () => {}"
      ></div> -->
    </InBody>
  </div>
</template>

<script>
  import Scrollbar from '@/components/MyScrollbar'
  import InBody from '@/components/InBody'
  export default {
    name: 'DIalog',
    components: { Scrollbar, InBody },
    props: {
      title: {
        type: String,
        default: '提示',
      },
      visible: {
        default: false,
        type: Boolean,
      },
      modalClose: {
        default: false,
        type: Boolean,
      },
      size: {
        default: 'mini', //mini:460  small:600  large: 900 bigger: 1280
        type: String,
      },
      destroy: {
        default: false,
        type: Boolean,
      },
      dialogClass: {
        default: '',
        type: String,
      },
      footer: {
        default: true,
        type: Boolean,
      },
    },
    data () {
      return {}
    },
    computed: {
      dialogVisible: {
        get () {
          return this.visible
        },
        set (val) {
          this.$emit('update:visible', val)
        },
      },
    },
    methods: {
      async handleClose (done) {
        await this.$emit('beforeClose')
        // done();
      },
    },
  }
</script>

<style lang="scss" scoped>
  .my-dialog {
    ::v-deep .el-dialog__wrapper {
      // z-index: 99 !important;
      width: 100vw;

      .el-dialog {
        @media screen and (max-width: 768px) {
          margin-top: 0 !important;
        }
        border-radius: 8px;
        min-height: 100px;
        .el-dialog__header {
          height: 46px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 14px;
          .el-dialog__headerbtn {
            position: relative;
            top: 0;
            right: 0;
            margin-left: 14px;
          }
        }
        .el-dialog__body {
          padding: 0;
          .dialog_body {
            padding: 0 14px 14px;
          }
        }
      }
      &.mini > .el-dialog {
        width: 460px;

        @media screen and (max-width: 768px) {
          width: 100vw;
          height: 100vh;
          overflow-y: scroll;
        }
        .dialog_body {
          max-height: 50vh;
        }
      }
      &.small > .el-dialog {
        width: 600px;
        .dialog_body {
          max-height: 60vh;
        }
      }
      &.large > .el-dialog {
        width: 900px;
        margin-top: 10vh !important;
        .dialog_body {
          max-height: 70vh;
        }
        .dialog_footer {
          // justify-content: flex-end;
        }
      }

      &.bigger > .el-dialog {
        width: 1280px;
        margin-top: 10vh !important;
        .dialog_body {
          max-height: 70vh;
        }
        .dialog_footer {
          // justify-content: flex-end;
        }
      }
    }
    .dialog_footer {
      display: flex;
      justify-content: center;
      padding: 14px;
      // 添加盒子阴影
      // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      ::v-deep.el-button {
        font-size: 14px;
        font-weight: 500;
        min-width: 80px;
      }
      & > :nth-child(n + 2) {
        margin-left: 30px;
      }
    }
    ::v-deep.el-dialog__header {
      .title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2a304d;
        display: flex;
        align-items: center;
        height: 20px;
        line-height: 20px;
        &::before {
          content: '';
          margin-right: 4px;
          display: inline-block;
          width: 3px;
          height: 100%;
          background: #ff5c5e;
          border-radius: 2px;
        }
      }
      .el-dialog__headerbtn i {
        font-size: 23px;
      }
    }
  }
  .my-modal {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
    top: 0;
    right: 0;
    z-index: 98;
  }
</style>
